<template>
    <div>
        <div class="tip-static shortcut-tip">勾选功能在首页显示, 一次最多勾选6个快捷功能!</div>
        <div class="shortcut-grid">
            <div v-for="(item, index) in gridList" :key="index" class="shortcut-content">
                <div class="grid-item">
                    <div class="menu-first">
                        <el-icon size="21">
                            <component v-if="item.meta && item.meta.icon" :is="item.meta.icon"></component>
                        </el-icon>
                        <div class="grid-title">{{ item.meta.title }}</div>
                    </div>
                    <el-checkbox-group v-model="selectList">
                        <el-checkbox v-for="item2 in item.children" :key="item2.meta.title" :label="item2.meta.title"
                            :value="item2">
                            {{ item2.meta.title }}
                        </el-checkbox>
                    </el-checkbox-group>
                </div>
            </div>
        </div>
        <div class="short-footer">
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="save">保存</el-button>
        </div>
    </div>
</template>

<script setup lang="ts">

import { usePermissionStore } from '@/store/modules/permission'
const permissionStore = usePermissionStore()
// 获取路由，处理路由，获取菜单
const routers = computed(() => permissionStore.topbarRouters)

const gridList = computed(() => {
    console.log(routers.value)
    return routers.value
})

const selectList = ref([])
const save = () => {
    console.log('保存', selectList.value)
}

const emit = defineEmits(["cancel"])

function cancel() {
  emit("cancel")
}

</script>

<style scoped lang="scss">
.tip-static {
    position: relative;
    padding: 20px;
    border: 2px dashed #bcedd3;
    border-radius: 3px;
    width: 100%;
    box-sizing: border-box;
    background-color: #f1fbf6;
}

.shortcut-tip {
    height: 40px;
    line-height: 40px;
    padding: 0;
    margin-bottom: 16px;
}

.shortcut-grid {
    display: flex;
    gap: 12px;

    .shortcut-content {
        flex: 1;

        .grid-item {
            border: 1px solid #ededed;
            padding: 12px 16px;
            border-radius: 4px;

            .menu-first {
                display: flex;
                align-items: center;
                margin-bottom: 12px;

                .grid-title {
                    margin-left: 12px;
                }
            }
        }
    }
}

.short-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
}
</style>